<script setup>
import {ref, computed, watch} from 'vue'
import {useRoute, useRouter} from "vue-router";
import useRegister from "@/hooks/useRegister";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'

const router=useRouter()
const activeIndex = ref('/info')
const handleSelect = (key, keyPath) => {
    if(key==="/user/register"){
      useRegister()
    }
    else{
      router.push(key)
    }
}
const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
const toggle = () => {
  language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
}

//确保tabbar显示正确
const route=useRoute()
watch(route,(newRoute)=>{
  activeIndex.value=newRoute.path
})

//登出
function handleExit(){
  localStorage.removeItem("username");
  router.push("/user/login")
}
</script>

<template>
  <div class="menu">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        router
        @select="handleSelect"
    >
      <el-menu-item index="0">
        <img class="logo"
             style="width: 60px"
             src="@/assets/img/logo.png"
             alt="Element logo"
        />
      </el-menu-item>
      <div class="flex-grow" />
      <el-menu-item index="/home">首页/Home</el-menu-item>
      <el-sub-menu index="5">
        <template #title>功能/Function</template>
        <el-menu-item index="/meteorology">气象/meteorogram</el-menu-item>
        <el-menu-item index="/discover">监测/monitor</el-menu-item>
        <el-menu-item index="/weather">天气/weather</el-menu-item>
        <el-menu-item index="/heat">反演/invasion</el-menu-item>
      </el-sub-menu>

      <!--<el-menu-item index="/meteorology">气象云图</el-menu-item>
      <el-menu-item index="/discover">监测</el-menu-item>
      <el-menu-item index="/weather">天气</el-menu-item>
      <el-menu-item index="/heat">反演</el-menu-item>-->

      <!--<el-menu-item index="/help">帮助/Help</el-menu-item>-->
      <el-sub-menu index="/help">
        <template #title>帮助/Help</template>
        <el-menu-item index="/help">问题/question</el-menu-item>
        <el-menu-item index="/help">联系/contact</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="/user">
        <template #title>账号/Account</template>
        <el-menu-item index="/user/register">注册/register</el-menu-item>
        <el-menu-item index="/user/login">登录/login</el-menu-item>
        <el-menu-item @click="handleExit" index="/user/out">退出/logout</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="6">
        <template #title>更多/More</template>
        <el-menu-item index="6-1">介绍/Introduction</el-menu-item>
        <el-menu-item index="6-2">关于/About</el-menu-item>
        <!--<el-menu-item index="6-2">更多信息</el-menu-item>-->
      </el-sub-menu>
    </el-menu>
  </div>

</template>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
.logo{
  //width: 100%;
  height: 100%;
}
.menu{
  //height: 100%;
  width: 100%;
  position: fixed;
  z-index: 9;
  top: 0;
}
</style>
<!--2024/2/2 17:30-->